<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title></title>
    <style>
        .box{
            height: 280px;
            width: 520px;
            margin: 100px auto;
            position: relative;
        }
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li{
        position: absolute;
         display: none; 
    }
    li.current{
        display: block;
    }
    section{
        /* position: absolute; */
        /* left:50px; */
        /* width: 120px; */
        height: 20px;
        position: relative;
        top:250px;
        left:190px;
    }
    section div{
        width: 12px;
        height: 12px;
        background-color: #999;
        border-radius: 100%;
        float: left;
        margin-left: 15px;
        cursor: pointer;
        /* position: absolute; */
    }
    .first{
       background-color: white;
   } 
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li class="current"><a href="#"><img src="./img/01.jpg" alt=""></a></li>
        <li><a href="#"><img src="./img/02.jpg" alt=""></a></li>
        <li><a href="#"><img src="./img/03.jpg" alt=""></a></li>
        <li><a href="#"><img src="./img/04.jpg" alt=""></a></li>
        <li><a href="#"><img src="./img/05.jpg" alt=""></a></li>
    </ul>
     <section>
           <div class="first"></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
       </section>
    
</div>

      
</body>
</html>
<script>
    var lis= document.querySelectorAll('li');
    var divs=document.querySelectorAll('section div');
    // 初始 显示索引为0 第一张
    var index=0; //记录当前显示图片的索引值
    // 每隔一秒钟切换一张图片
    var change=setInterval(changeImage,500);

    function changeImage(){
        // 先让所有的图片隐藏 去掉类名
         for(var i=0;i<lis.length;i++){
            lis[i].className='';
            divs[i].className='';
    }
    // 让记录显示图片的索引值 +1
    index++;
    if(index==5){
        // 当循环到最后一张的时候，从第一张开始
        index=0; 
    }
    console.log(index);
    // 根据对于的索引值，显示对应的图片
    lis[index].className='current';
    divs[index].className='first';
}

   
   
    for (var i = 0; i < divs.length; i++) {
            divs[i].index = i;
            divs[i].onmouseover = function () {
                for (var i = 0; i < divs.length; i++) {


                    divs[index].className = '';
                    lis[index].className = '';
                    clearInterval(change);
                }

                this.className = 'first';
                lis[this.index].className = 'current';
            }

            divs[i].onmouseout = function () {
                index = this.index;
                // setInterval(change,0);
 
            }
        }   
    
     
     
   





</script>